<!-- 产品序列号选择 -->
<template>
  <div class="serialNumSelect">
    <div class="common-modal-sub-title">
      <i class="el-icon-vertical-bar"></i>
      <div class="sub-title">
        产品序列号选择<span class="add-text">（已选中产品序列号：{{ selectionList.length }}条）</span>
      </div>
    </div>
    <avue-crud
      v-model="form"
      ref="crud"
      :option="option"
      :table-loading="loading"
      :defaults.sync="defaults"
      :data="data"
      :page.sync="page"
      @search-change="searchChange"
      @search-reset="searchReset"
      @selection-change="selectionChange"
      @current-change="currentChange"
      @size-change="sizeChange"
      @refresh-change="refreshChange"
      @on-load="onLoad"
    >
      <!-- 追溯，详情 -->
      <template slot="menu">
        <el-button type="text" size="small" @click="handleAppend">追溯</el-button>
        <el-button type="text" size="small" @click="handleDetail">详情</el-button>
      </template>
    </avue-crud>
  </div>
</template>

<script>
import { getList, getDetail, add, update, remove } from '@/api/product/productionline';
// import CommonModalTemplate from '@/components/common-modal-template/common-modal-template2.vue';
export default {
  components: {
    // CommonModalTemplate
  },
  data() {
    return {
      form: {},
      query: {},
      defaults: {},
      loading: true,
      data: [],
      tableOption: '锁定原因',
      page: {
        pageSize: 20,
        currentPage: 1,
        total: 0
      },
      selectionList: [],
      option: {
        height: 'auto',
        calcHeight: 30,
        tip: false,
        searchMenuSpan: 6,
        searchShow: true,
        selection: true,
        border: true,
        index: true,
        addBtn: false,
        viewBtn: false,
        editBtn: false,
        delBtn: false,
        searchBtn: false,
        emptyBtn: false,
        refreshBtn: false,
        columnBtn: false,
        dialogClickModal: false,
        menu: true,
        menuWidth: 100,
        labelWidth: 150,
        reserveSelection: true,
        column: [
          {
            label: '产品序列号',
            prop: 'lockDetail',
            order: 1,
            searchSpan: 8,
            searchLabelWidth: 95,
            search: true
          },
          {
            label: '类型',
            prop: 'lockedType'
          },
          {
            label: '当前工序',
            prop: 'lockedBy',
            order: 2,
            searchSpan: 8,
            type: 'select',
            search: true
          },
          {
            label: '下一工序',
            prop: 'lockedTime'
          },
          {
            label: '上一工序',
            prop: 'lockedReason'
          },
          {
            label: '上一工序过站时间',
            prop: 'status',
            type: 'datetime',
            format: 'yyyy-MM-dd HH:mm:ss',
            valueFormat: 'yyyy-MM-dd HH:mm:ss'
          },
          {
            label: '上一工序过站工位',
            prop: 'unlockedBy'
          },
          {
            label: '状态',
            prop: 'unlockedTime',
            slot: true,
            searchSpan: 8,
            order: 3,
            type: 'select',
            search: true
          },
          {
            label: '锁定原因',
            prop: 'unlockedRemark',
            slot: true
          }
        ]
      }
    };
  },
  computed: {
    ids() {
      let ids = [];
      this.selectionList.forEach((ele) => {
        ids.push(ele.id);
      });
      return ids.join(',');
    }
  },
  methods: {
    handleAppend(row) {},
    handleDetail(row) {},
    searchReset() {
      this.query = {};
      this.onLoad(this.page);
    },
    searchChange(params, done) {
      this.query = params;
      this.page.currentPage = 1;
      this.onLoad(this.page, params);
      done();
    },
    selectionChange(list) {
      this.selectionList = list;
      this.$emit('selectChange', this.selectionList);
      // this.$refs.crud.toggleSelection();
    },
    log() {
      this.selectionList = [];
      this.$refs.crud.toggleSelection();
    },

    currentChange(currentPage) {
      this.page.currentPage = currentPage;
    },
    sizeChange(pageSize) {
      this.page.pageSize = pageSize;
    },
    refreshChange() {
      this.onLoad(this.page, this.query);
    },
    onLoad(page, params = {}) {
      this.loading = true;
      getList(page.currentPage, page.pageSize, Object.assign(params, this.query)).then((res) => {
        const data = res.data.data;
        this.page.total = data.total;
        this.data = data.records;
        this.loading = false;
        // this.selectionClear();
      });
    },
    // 锁定原因弹框 配置
    openLockedReasonModal(id) {
      this.tableOption = '锁定原因';
      this.commonOption.option = {
        title: '锁定原因',
        submitBtn: false,
        emptyBtn: false,
        column: [
          {
            label: '锁定原因',
            prop: 'lockedReason',
            type: 'textarea',
            minRows: 3,
            span: 24,
            disabled: true,
            maxRows: 3
          }
        ]
      };
      this.$refs.commonModalTemplate.showModal();
      getDetail(id)
        .then((res) => {
          if (res && res.status == 200) {
            let data = res.data.data;
            this.commonForm.lockedReason = data.lockedReason;
            console.log(data);
          }
        })
        .catch((err) => {
          console.log(err);
        });
    },
    // 锁定详情弹框 配置
    openLockedDetailModal(id) {
      getDetail(id)
        .then((res) => {
          if (res && res.status == 200) {
            let data = res.data.data;
            let lockedObjects = null;
            this.tableOption = '锁定对象';
            switch (data.lockedType) {
              case 'PRODUCT':
                this.tableOption = '锁定对象（产品条码）';
                break;
              case 'MATERIAL':
                this.tableOption = '锁定对象（物料条码）';
                break;
              case 'WORKORDER':
                this.tableOption = '锁定对象（工单号）';
                break;
              case 'ROUTE':
                this.tableOption = '锁定对象（工序）';
                break;
              default:
                break;
            }
            if (data.lockedType == 'PRODUCT' || data.lockedType == 'MATERIAL') {
              this.codeList = JSON.parse(data.lockedObjects || '[]');
            } else {
              this.codeList = JSON.parse(data.lockedObjects || '{}');
            }
            console.log(this.codeList);
            this.$refs.commonModalTemplate.showModal();
          }
        })
        .catch((err) => {
          console.log(err);
        });
    },
    // 解锁说明弹框 配置
    openUnLockedReasonModal(id) {
      this.tableOption = '解锁说明';
      this.commonOption.option = {
        title: '解锁说明',
        submitBtn: false,
        emptyBtn: false,
        column: [
          {
            label: '解锁说明',
            prop: 'unlockedRemark',
            type: 'textarea',
            minRows: 3,
            span: 24,
            disabled: true,
            maxRows: 3
          }
        ]
      };
      this.$refs.commonModalTemplate.showModal();
      getDetail(id)
        .then((res) => {
          if (res && res.status == 200) {
            let data = res.data.data;
            this.commonForm.unlockedRemark = data.unlockedRemark;
          }
        })
        .catch((err) => {
          console.log(err);
        });
    }
  }
};
</script>

<style lang="scss" scoped>
.serialNumSelect {
  width: 48%;
  .common-modal-sub-title {
    display: flex;
    align-items: center;
    margin-bottom: 10px;
    .el-icon-vertical-bar {
      height: 20px;
      &::before {
        width: 5px;
        height: 100%;
      }
    }
    .sub-title {
      margin-left: 10px;
      font-size: 18px;
      font-weight: bold;
      .add-text {
        font-size: 16px;
      }
    }
  }
  ::v-deep.el-form-item {
    margin-bottom: 2px;
  }
  ::v-deep.avue-crud__menu {
    display: none;
  }
}
</style>
